<template>
	<view>
		<view class="main">
			<h3>物种通识监控管理平台</h3>
			<view class="inputs">
				<view class="">
					<i class="icon-user"></i>
					<!-- <template>
						<u-input v-model="username" type="text"
							:auto-height="autoHeight" placeholder="用户名" />
					</template> -->
					<input type="text" v-model="loginForm.username" placeholder="用户名" />
				</view>

				<input type="password" v-model="loginForm.password" placeholder="密码" />
				<view class="yanzhm">
					<input type="text" class="w-25" v-model="loginForm.code" placeholder="验证码" />
					<image :src="captcha" mode="" @click="getCaptchaImage()"></image>
				</view>

			</view>
			<button @click="login()">
				<span>登录</span>
			</button>
		</view>
	</view>
</template>

<script>
	import proData from "@/common/projectData.js";
	import imgData from "@/common/uiImg.js";
	import {
		getCaptchaImage,
		login
	} from '../../common/api/login.js'
	import {
		getUserInfo
	} from '../../common/api/info.js'
	export default {
		data() {
			return {
				captcha: '',
				loginForm: {
					username: "admin",
					password: "2021hncpc",
					rememberMe: false,
					code: "",
					uuid: ""
				},
				userInfo: {
					item: {},
					roleGroup: ""
				},
			}
		},
		onLoad() {
			this.getCaptchaImage();
		},
		methods: {
			getCaptchaImage() {
				getCaptchaImage().then(response => {
					console.log(response);
					this.captcha = 'data:image/jpeg;base64,' + response[1].data.img;
					this.loginForm.uuid = response[1].data.uuid;
				});
			},
			login() {
				login(this.loginForm).then(response => {
					console.log(response[1].data.token);
					if (response[1].data.code == 200) {
						uni.setStorageSync("token", response[1].data.token + ";" + (new Date()).getTime())
						this.loginSuccess();
					}
					if (response[1].data.code == 500) {
						this.loginFail(response[1].data.msg);
					}
				});
			},
			loginSuccess() {
				getUserInfo().then(response => {
					this.userInfo.roleGroup = response[1].data.roleGroup;
					this.userInfo.item = response[1].data.data;
					uni.setStorageSync('userInfo', this.userInfo);
					
					let pages = getCurrentPages(); // 当前页面
					let beforePage = pages[pages.length - 2]; // 前一个页面
					uni.navigateBack({
						success: function() {
							beforePage.onLoad(); // 执行前一个页面的onLoad方法
						}
					});
				});
			},
			loginFail(msg) {
				this.getCaptchaImage();
				uni.showToast({
					title: msg,
					icon: 'none',
					duration: 2000
				});
			}
		}
	}
</script>

<style>
	.icon-user {
		position: absolute;
		left: 0;
		z-index: 5;
		/* background-image: url(../../static/login/user.png); */
		background-repeat: no-repeat;
		background-position: 0 0;
		width: 20px;
		height: 20px;
		top: 4px;
		left: 5px;
	}

	.main {
		margin: 50% auto;
		width: 85%;
		height: 630rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}

	h3 {
		position: relative;
		top: 40rpx;
		margin: 80rpx auto;
		width: 55%;
	}

	.inputs {
		margin: 0 auto;
		width: 85%;
	}

	input {
		height: 60rpx;
		margin-bottom: 50rpx;
		border: 1px solid #d5d8e1;
		border-radius: 5rpx;
		padding: 5rpx 5rpx 5rpx 22rpx;
	}

	u-input {
		height: 60rpx;
		margin-bottom: 50rpx;
		border: 1px solid #d5d8e1;
		border-radius: 5rpx;
		padding: 5rpx 5rpx 5rpx 22rpx;
	}

	.w-25 {
		width: 60%;
	}

	.yanzhm {
		height: 60rpx;
		display: flex;
	}

	image {
		margin-left: 20rpx;
		width: 35%;
		height: 100%;
		border: 1px solid #89a285;
	}

	button {
		padding: 0;
		margin-top: 50rpx;
		height: 70rpx;
		width: 85%;
		color: #FFFFFF;
		font-size: 40rpx;
		background-color: #138853
	}

	span {
		position: absolute;
		top: -14rpx;
		left: 40%;
	}
</style>
